<template>
    <el-dialog :visible.sync="dialogVisible" title="车辆表管理" :close-on-press-escape="false" :close-on-click-modal="false"
        width="800px">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="车型" prop="vehicleTypeId">
                        <el-select
                            v-model="form.vehicleTypeId"
                            filterable
                             clearable
                             style="width:100%;"
                        >
                            <el-option
                                v-for="item in vehicleTypeOptions"
                                :key="item.id"
                                :label="item.vehicleTypeName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="品牌" prop="vehicleTypeId">
                        <el-select
                            v-model="form.brandId"
                            filterable
                             clearable
                             style="width:100%;"
                        >
                            <el-option
                                v-for="item in vehicleBrandOptions"
                                :key="item.id"
                                :label="item.brandName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="能源类型" prop="energy">
                        <el-select v-model="form.energy" style="width:100%;">
                            <el-option
                                v-for="item in Dict.enums.vehicleEnergyType"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            />
                        </el-select>

                    </el-form-item>
                </el-col>
                <el-col :span="12">

                    <el-form-item label="车牌号" prop="licensePlateNumber">
                        <el-input v-model="form.licensePlateNumber" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="尺寸" prop="size">
                        <el-input v-model="form.size" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="颜色" prop="color">
                        <el-input v-model="form.color" placeholder="请输入" />
                    </el-form-item>

                </el-col>
            </el-row>

            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入" />
            </el-form-item>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="车辆图片" prop="vehicleImage">
                        <UploadImage :value="form.vehicleImage" @refresh="setVehicleImage"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="行驶证图片" prop="drivingLicenseImage">
                        <UploadImage :value="form.drivingLicenseImage" @refresh="setDrivingLicenseImage"/>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-popconfirm title="确定保存吗？" @onConfirm="submitForm()">
                <el-button slot="reference" type="primary">保存</el-button>
            </el-popconfirm>
        </div>
    </el-dialog>
</template>

<script>
    import { VehicleApi } from '@/api/user/VehicleApi'
    import { Common } from '@/utils/common'
    import { VehicleTypeApi } from '@/api/user/VehicleTypeApi'
    import { VehicleBrandApi } from '@/api/user/VehicleBrandApi'
    import UploadImage from '@/components/UploadImage'

    export default {
        name: 'IntercityVehicleUpdate',
        components: {
            UploadImage
        },
        data() {
            return {
                form: {
                    id: '',
                    vehicleTypeId: '',
                    licensePlateNumber: '',
                    drivingLicenseImage: [],
                    vehicleImage:[],
                    brandId:'',
                    size:'',
                    color:'',
                    energy:'',
                    remark: '',
                },
                rules: {
                    vehicleTypeId: [{
                            required: true,
                            message: '请输入车型ID',
                            trigger: 'blur'
                        }
                    ],
                    licensePlateNumber: [{
                            required: true,
                            message: '请输入车牌号',
                            trigger: 'blur'
                        },
                        {
                            min: 1,
                            max: 100,
                            message: '长度在 1 到 100 个字符',
                            trigger: 'blur'
                        }
                    ],
                },
                dialogVisible: false,
                vehicleTypeOptions:[],
                vehicleBrandOptions:[],
            }
        },
        created() {
            this.getVehicleTypeOptions()
            this.getVehicleBrandOptions()
        },
        methods: {
            // 显示组件
            async show(data) {
                const that = this

                that.dialogVisible = true
                if (that.$refs['formRef'] !== undefined) {
                    that.$refs['formRef'].resetFields()
                    that.form.id = ""
                }

                that.$nextTick(() => {
                    if (data.id > 0) {
                        that.form = Common.assign(that.form, data)
                    }
                })
            },
            getVehicleTypeOptions() {
                VehicleTypeApi.getList([]).then((response) => {
                    this.vehicleTypeOptions = response
                })
            },

            getVehicleBrandOptions() {
                VehicleBrandApi.getList({}).then((response) => {
                    this.vehicleBrandOptions = response
                })
            },

            // 提交表单
            submitForm() {
                const that = this
                that.$refs['formRef'].validate((valid) => {
                    if (!valid) return false

                    if (that.form.id) {
                        VehicleApi.edit(that.form).then(() => {
                            that.dialogVisible = false
                            that.$emit('refresh')
                        })
                    } else {
                        VehicleApi.create(that.form).then(() => {
                            that.dialogVisible = false
                            that.$emit('refresh')
                        })
                    }
                })
            },

            setVehicleImage(e){
                this.form.vehicleImage = e
            },

            setDrivingLicenseImage(e){
                this.form.drivingLicenseImage = e
            }

        }
    }
</script>
